Programming Windows Phone 7 : TextBlock Properties and Inlines

You can set FontStyle to either Normal or Italic. In theory, you can set FontStretch to values such as Condensed and Expanded but I’ve never seen these work in Silverlight. Generally you’ll set FontWeight to Normal or Bold, although there are other options like Black, SemiBold, and Light.

TextBlock also has a TextDecorations property. Although this property seems to be very generalized, in Silverlight there is only one option:

TextDecorations="Underline"

The TextBlock property I’ve used most, of course, is Text itself. The string you set to the Text property can include embedded Unicode characters in the standard XML format, for example:

Text="π is approximately 3.14159"

If the Text property is set to a very long string, you might not be able to see all of it. You can insert the codes for carriage return or line feed characters (
 or 
) or you can set

TextWrapping="Wrap"

and TextAlignment to Left, Right, or Center (but not Justify). You can also set the text as a content of the TextBlock element:

<TextBlock>
    This is some text.
</TextBlock>

However, you might be surprised to learn that the ContentProperty attribute of TextBlock is not the Text property but an entirely different property named Inlines. This Inlines property is of type InlineCollection—a collection of objects of type Inline, namely LineBreak and Run. These make TextBlock much more versatile. The use of LineBreak is simple:

<TextBlock>
    This is some text<LineBreak />This is some more text.
</TextBlock>

Run is interesting because it too has FontFamily, FontSize, FontStretch, FontStyle, FontWeight, Foreground, and TextDecorations properties, so you can make your text very fancy:

<TextBlock FontSize="36"
           TextWrapping="Wrap">
    This is
    some <Run FontWeight="Bold">bold</Run> text and
    some <Run FontStyle="Italic">italic</Run> text and
    some <Run Foreground="Red">red</Run> text and
    some <Run TextDecorations="Underline">underlined</Run> text
    and some <Run FontWeight="Bold"
                  FontStyle="Italic"
                  Foreground="Cyan"
                  FontSize="72"
                  TextDecorations="Underline">big</Run> text.
</TextBlock>

In the Visual Studio design view, you might see the text within the Run tags not properly separated from the text outside the Run tags. This is an error. When you actually run the program in the emulator, it looks fine:

These are vector-based TrueType fonts, and the actual vectors are scaled to the desired font size before the font characters are rasterized, so regardless how big the characters get, they still seem smooth.

Although you might think of a TextBlock as sufficient for a paragraph of text, it doesn’t provide all the features that a proper Paragraph class provides, such as first-line text indenting or a hanging first line where the rest of the paragraph is indented.

The use of the Inlines property allows us to write a program that explores the FontFamily property. In XAML you can set FontFamily to a string. (In code you need to create an instance of the FontFamily class.) The default is called “Portable User Interface”. On the phone emulator, this default font maps seems to map to Segoe WP—a Windows Phone variant of the Segoe font that is a frequently found in Microsoft products and printed material, including this very book.

The FontFamilies program lists all the FontFamily values that Visual Studio’s Intellisense tells us are valid:

Example 1. Silverlight Project: FontFamilies File: MainPage.xaml

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <TextBlock FontSize="24">
        <Run FontFamily="Arial">Arial</Run><LineBreak />
        <Run FontFamily="Arial Black">Arial Black</Run><LineBreak />
        <Run FontFamily="Calibri">Calibri</Run><LineBreak />
        <Run FontFamily="Comic Sans MS">Comic Sans MS</Run><LineBreak />
        <Run FontFamily="Courier New">Courier New</Run><LineBreak />
        <Run FontFamily="Georgia">Georgia</Run><LineBreak />
        <Run FontFamily="Lucida Sans Unicode">Lucida Sans Unicode</Run><LineBreak />
        <Run FontFamily="Portable User Interface">Portable User Interface</
Run><LineBreak />
        <Run FontFamily="Segoe WP">Segoe WP</Run><LineBreak />
        <Run FontFamily="Segoe WP Black">Segoe WP Black</Run><LineBreak />
        <Run FontFamily="Segoe WP Bold">Segoe WP Bold</Run><LineBreak />
        <Run FontFamily="Segoe WP Light">Segoe WP Light</Run><LineBreak />
        <Run FontFamily="Segoe WP Semibold">Segoe WP Semibold</Run><LineBreak />
        <Run FontFamily="Segoe WP SemiLight">Segoe WP SemiLight</Run><LineBreak />
        <Run FontFamily="Tahoma">Tahoma</Run><LineBreak />
        <Run FontFamily="Times New Roman">Times New Roman</Run><LineBreak />
        <Run FontFamily="Trebuchet MS">Trebuchet MS</Run><LineBreak />
        <Run FontFamily="Verdana">Verdana</Run><LineBreak />
        <Run FontFamily="Webdings">Webdings</Run> (Webdings)
    </TextBlock>
</Grid>

					  

Here’s the result:

If you misspell a name that you assign to FontFamily, nothing bad will happen; you’ll just get the default.

The predefined resources include four keys that return objects of type FontFamily: PhoneFontFamilyNormal, PhoneFontFamilyLight, PhoneFontFamilySemiLight, and PhoneFontFamilySemiBold. These return the corresponding Segoe WP fonts.